<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link rel="icon" href="img/logo_bb.png" type="image/png" />
  <title>呗呗优选官网</title>
  <meta name="keywords" content="呗呗优选｜聊天｜交友｜真实｜有趣｜社交｜语音｜视频｜群聊" />
  <meta name="description"
    content="呗呗优选是一款真实有趣的聊天交友应用，专注于为用户提供安全、便捷的社交体验。支持文字聊天、语音通话、视频聊天、群聊等功能，让你轻松结识志同道合的朋友，享受纯粹的社交乐趣。" />
  <link href="css/main.css" rel="stylesheet" type="text/css" />
  <script src="js/juqery-3.7.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
  <script src="js/jquery.fullPage.min.js"></script>
  <script src="js/main.js" type="text/javascript"></script>
</head>

<body>
  <div id="wrap">
    <div class="g_head" id="head">
      <div class="headBox">
        <div class="logoBox" style="display: flex; align-items: center;">
          <a href="index.html" style="display: flex; align-items: center; text-decoration: none;">
            <img src="img/logo_bb.png" alt="呗呗优选logo" style="height:60px;">
            <span style="font-size:22px;font-weight:bold;margin-left:10px;color:#222;">呗呗优选</span>
          </a>
        </div>
        <div class="navBox">
          <ul>
            <li class="active"><a href="#Home" data-id="Home">首页</a></li>
            <li><a href="#About" data-id="About">关于我们</a></li>
            <li><a href="#Contact" data-id="Contact">联系我们</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="main">
      <div class="section section1 section1_1">
        <div class="homeBannerBox">
          <div class="img">
            <svg width="900" height="739" viewBox="0 0 900 739" xmlns="http://www.w3.org/2000/svg">
              <!-- 呗呗优选消息页面设计 - 一比一复刻参考风格 -->
              <defs>
                <!-- 圆环装饰渐变 -->
                <linearGradient id="ringGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.6" />
                  <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0.2" />
                </linearGradient>
                
                <!-- 手机屏幕渐变 -->
                <linearGradient id="phoneScreen1" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
                </linearGradient>
              </defs>
              
              <!-- 网格纹理 -->
              <defs>
                <pattern id="gridPattern1" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#333" stroke-width="0.5" opacity="0.1"/>
                </pattern>
              </defs>
              <rect width="900" height="739" fill="url(#gridPattern1)" opacity="0.3"/>
              
              <!-- 圆形装饰线条 -->
              <circle cx="450" cy="369" r="280" fill="none" stroke="url(#ringGradient1)" stroke-width="1" opacity="0.4"/>
              <circle cx="450" cy="369" r="320" fill="none" stroke="url(#ringGradient1)" stroke-width="1" opacity="0.3"/>
              <circle cx="450" cy="369" r="360" fill="none" stroke="url(#ringGradient1)" stroke-width="1" opacity="0.2"/>
              
              <!-- 浮动装饰元素 -->
              <!-- 心形图标 -->
              <g transform="translate(120, 180)">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF6B6B" opacity="0.8"/>
              </g>
              
              <!-- 视频图标 -->
              <g transform="translate(720, 400)">
                <rect x="0" y="6" width="20" height="12" rx="2" fill="#9C27B0" opacity="0.8"/>
                <path d="M20 8.5L24 6v12l-4-2.5V8.5z" fill="#9C27B0" opacity="0.8"/>
              </g>
              
              <!-- 装饰圆点 -->
              <circle cx="180" cy="120" r="4" fill="#00d4aa" opacity="0.6"/>
              <circle cx="750" cy="250" r="3" fill="#00d4aa" opacity="0.5"/>
              <circle cx="820" cy="580" r="5" fill="#00d4aa" opacity="0.4"/>
              <circle cx="100" cy="500" r="3" fill="#00d4aa" opacity="0.7"/>
              
              <!-- 第一个手机 - 聊天列表 -->
              <g transform="translate(150, 80)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen1)"/>
                
                <!-- 状态栏 -->
                <rect x="8" y="8" width="204" height="25" fill="#fff"/>
                <text x="20" y="25" font-family="Arial" font-size="10" fill="#000">9:41</text>
                <text x="180" y="25" font-family="Arial" font-size="10" fill="#000">100%</text>
                
                <!-- 头部导航 -->
                <rect x="8" y="33" width="204" height="40" fill="#fff"/>
                <text x="20" y="55" font-family="Microsoft YaHei" font-size="14" font-weight="bold" fill="#000">消息</text>
                <circle cx="170" cy="53" r="8" fill="#f0f0f0"/>
                <text x="167" y="57" font-family="Arial" font-size="8" fill="#666">🔍</text>
                <circle cx="190" cy="53" r="8" fill="#f0f0f0"/>
                <text x="187" y="57" font-family="Arial" font-size="8" fill="#666">+</text>
                
                <!-- 欢迎消息 -->
                <rect x="15" y="80" width="185" height="25" rx="12" fill="#fff3cd"/>
                <circle cx="28" cy="92" r="6" fill="#FF6B6B"/>
                <text x="40" y="97" font-family="Microsoft YaHei" font-size="9" fill="#856404">欢迎来到呗呗优选！</text>
                
                <!-- 聊天项1 - 阿斯 -->
                <rect x="8" y="110" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="132" r="12" fill="#4A90E2"/>
                <text x="30" y="137" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">A</text>
                <text x="50" y="128" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">阿斯</text>
                <text x="50" y="142" font-family="Microsoft YaHei" font-size="8" fill="#666">[语音聊天]</text>
                <text x="185" y="125" font-family="Arial" font-size="7" fill="#999" text-anchor="end">55分钟前</text>
                
                <!-- 聊天项2 - 群聊 -->
                <rect x="8" y="155" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="177" r="12" fill="#17A2B8"/>
                <circle cx="27" cy="174" r="3" fill="#fff"/>
                <circle cx="33" cy="174" r="3" fill="#fff"/>
                <circle cx="30" cy="180" r="3" fill="#fff"/>
                <text x="50" y="173" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">群聊</text>
                <text x="50" y="187" font-family="Microsoft YaHei" font-size="8" fill="#666">[语音聊天]</text>
                <text x="185" y="170" font-family="Arial" font-size="7" fill="#999" text-anchor="end">刚刚</text>
                
                <!-- 聊天项3 - 啊哈撤大 -->
                <rect x="8" y="200" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="222" r="12" fill="#28A745"/>
                <text x="30" y="227" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">哈</text>
                <text x="50" y="218" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">啊哈撤大</text>
                <text x="50" y="232" font-family="Microsoft YaHei" font-size="8" fill="#666">[语音聊天]</text>
                <text x="185" y="215" font-family="Arial" font-size="7" fill="#999" text-anchor="end">1天前</text>
                
                <!-- 底部导航 -->
                <rect x="8" y="360" width="204" height="32" fill="#f8f9fa"/>
                <circle cx="50" cy="376" r="8" fill="#FF6B6B"/>
                <text x="50" y="380" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">💬</text>
                <text x="50" y="388" font-family="Microsoft YaHei" font-size="6" fill="#FF6B6B" text-anchor="middle">首页</text>
                <circle cx="110" cy="376" r="8" fill="#ccc"/>
                <text x="110" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">👥</text>
                <text x="110" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">通讯录</text>
                <circle cx="170" cy="376" r="8" fill="#ccc"/>
                <text x="170" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">👤</text>
                <text x="170" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">我的</text>
              </g>
              
              <!-- 第二个手机 - 聊天对话 -->
              <g transform="translate(400, 150)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen3)"/>
                
                <!-- 头部导航 -->
                <rect x="8" y="8" width="204" height="45" fill="#FF6B6B"/>
                <text x="20" y="35" font-family="Arial" font-size="12" fill="#fff">‹</text>
                <text x="110" y="35" font-family="Microsoft YaHei" font-size="12" font-weight="bold" fill="#fff" text-anchor="middle">呗呗优选官方群 (5)</text>
                <text x="190" y="35" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">⋯</text>
                
                <!-- 群聊内容区域 -->
                <rect x="8" y="53" width="204" height="280" fill="#E5E5EA"/>
                
                <!-- 日期分隔 -->
                <rect x="80" y="70" width="60" height="15" rx="7" fill="#fff" opacity="0.8"/>
                <text x="110" y="80" font-family="Arial" font-size="7" fill="#666" text-anchor="middle">2025/01/14</text>
                
                <!-- 群消息1 - 阿斯 -->
                <circle cx="25" cy="105" r="10" fill="#4A90E2"/>
                <text x="25" y="110" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">阿</text>
                <text x="40" y="97" font-family="Microsoft YaHei" font-size="7" fill="#666">阿斯</text>
                <rect x="40" y="105" width="100" height="20" rx="10" fill="#fff"/>
                <text x="90" y="117" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">大家好！欢迎来到呗呗优选</text>
                
                <!-- 群消息2 - 啊哈撤大 -->
                <circle cx="25" cy="140" r="10" fill="#28A745"/>
                <text x="25" y="145" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">啊</text>
                <text x="40" y="132" font-family="Microsoft YaHei" font-size="7" fill="#666">啊哈撤大</text>
                <rect x="40" y="140" width="80" height="20" rx="10" fill="#fff"/>
                <text x="80" y="152" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">好的，多多指教</text>
                
                <!-- 群消息3 - 财神爷 -->
                <circle cx="25" cy="175" r="10" fill="#FFB74D"/>
                <text x="25" y="180" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">财</text>
                <text x="40" y="167" font-family="Microsoft YaHei" font-size="7" fill="#666">财神爷</text>
                <rect x="40" y="175" width="90" height="20" rx="10" fill="#fff"/>
                <text x="85" y="187" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">这个软件真不错！</text>
                
                <!-- 自己的消息 -->
                <rect x="100" y="210" width="80" height="30" rx="15" fill="#4CAF50"/>
                <text x="140" y="223" font-family="Microsoft YaHei" font-size="8" fill="#fff" text-anchor="middle">我也觉得很棒</text>
                <text x="140" y="233" font-family="Microsoft YaHei" font-size="8" fill="#fff" text-anchor="middle">一起交流吧！</text>
                
                <!-- 语音消息 -->
                <circle cx="25" cy="265" r="10" fill="#17A2B8"/>
                <text x="25" y="270" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">语</text>
                <text x="40" y="257" font-family="Microsoft YaHei" font-size="7" fill="#666">语音群聊</text>
                <rect x="40" y="265" width="70" height="20" rx="10" fill="#fff"/>
                <text x="55" y="277" font-family="Arial" font-size="8" fill="#333">🎤 20"</text>
                
                <!-- 底部输入区 -->
                <rect x="8" y="340" width="204" height="50" fill="#fff"/>
                <circle cx="30" cy="365" r="12" fill="#f0f0f0"/>
                <text x="30" y="369" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">😊</text>
                <rect x="50" y="355" width="100" height="20" rx="10" fill="#f5f5f5"/>
                <text x="100" y="367" font-family="Microsoft YaHei" font-size="8" fill="#999" text-anchor="middle">群聊消息...</text>
                <circle cx="160" cy="365" r="10" fill="#2196F3"/>
                <text x="160" y="369" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">🎤</text>
                <circle cx="180" cy="365" r="12" fill="#f0f0f0"/>
                <text x="180" y="369" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">+</text>
              </g>
            </svg>
          </div>
          <div class="info">
            <div class="p1">多人群聊</div>
            <div class="p2">创建话题群聊，与志同道合的朋友畅聊</div>
          </div>
        </div>
      </div>
      <div class="section section1 section1_2">
        <div class="homeBannerBox">
          <div class="img">
            <svg width="900" height="739" viewBox="0 0 900 739" xmlns="http://www.w3.org/2000/svg">
              <!-- 呗呗优选通讯录页面设计 - 一比一复刻参考风格 -->
              <defs>
                <!-- 圆环装饰渐变 -->
                <linearGradient id="ringGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.6" />
                  <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0.2" />
                </linearGradient>
                
                <!-- 手机屏幕渐变 -->
                <linearGradient id="phoneScreen2" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
                </linearGradient>
              </defs>
              
              <!-- 网格纹理 -->
              <defs>
                <pattern id="gridPattern2" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#333" stroke-width="0.5" opacity="0.1"/>
                </pattern>
              </defs>
              <rect width="900" height="739" fill="url(#gridPattern2)" opacity="0.3"/>
              
              <!-- 圆形装饰线条 -->
              <circle cx="450" cy="369" r="280" fill="none" stroke="url(#ringGradient2)" stroke-width="1" opacity="0.4"/>
              <circle cx="450" cy="369" r="320" fill="none" stroke="url(#ringGradient2)" stroke-width="1" opacity="0.3"/>
              <circle cx="450" cy="369" r="360" fill="none" stroke="url(#ringGradient2)" stroke-width="1" opacity="0.2"/>
              
              <!-- 浮动装饰元素 -->
              <!-- 心形图标 -->
              <g transform="translate(120, 180)">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF6B6B" opacity="0.8"/>
              </g>
              
              <!-- 视频图标 -->
              <g transform="translate(720, 400)">
                <rect x="0" y="6" width="20" height="12" rx="2" fill="#9C27B0" opacity="0.8"/>
                <path d="M20 8.5L24 6v12l-4-2.5V8.5z" fill="#9C27B0" opacity="0.8"/>
              </g>
              
              <!-- 装饰圆点 -->
              <circle cx="180" cy="120" r="4" fill="#00d4aa" opacity="0.6"/>
              <circle cx="750" cy="250" r="3" fill="#00d4aa" opacity="0.5"/>
              <circle cx="820" cy="580" r="5" fill="#00d4aa" opacity="0.4"/>
              <circle cx="100" cy="500" r="3" fill="#00d4aa" opacity="0.7"/>
              
              <!-- 第一个手机 - 通讯录列表 -->
              <g transform="translate(150, 80)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen2)"/>
                
                <!-- 状态栏 -->
                <rect x="8" y="8" width="204" height="25" fill="#fff"/>
                <text x="20" y="25" font-family="Arial" font-size="10" fill="#000">9:41</text>
                <text x="180" y="25" font-family="Arial" font-size="10" fill="#000">100%</text>
                
                <!-- 头部导航 -->
                <rect x="8" y="33" width="204" height="40" fill="#fff"/>
                <text x="20" y="55" font-family="Microsoft YaHei" font-size="14" font-weight="bold" fill="#000">通讯录</text>
                <circle cx="170" cy="53" r="8" fill="#f0f0f0"/>
                <text x="167" y="57" font-family="Arial" font-size="8" fill="#666">🔍</text>
                <circle cx="190" cy="53" r="8" fill="#f0f0f0"/>
                <text x="187" y="57" font-family="Arial" font-size="8" fill="#666">+</text>
                
                <!-- 新朋友 -->
                <rect x="8" y="80" width="204" height="35" fill="#fff"/>
                <circle cx="25" cy="97" r="10" fill="#FF6B6B"/>
                <text x="25" y="102" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">+</text>
                <text x="45" y="102" font-family="Microsoft YaHei" font-size="10" fill="#000">新朋友</text>
                <circle cx="180" cy="97" r="8" fill="#FF6B6B"/>
                <text x="180" y="101" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">3</text>
                
                <!-- 群聊 -->
                <rect x="8" y="115" width="204" height="35" fill="#fff"/>
                <circle cx="25" cy="132" r="10" fill="#17A2B8"/>
                <circle cx="22" cy="129" r="2" fill="#fff"/>
                <circle cx="28" cy="129" r="2" fill="#fff"/>
                <circle cx="25" cy="135" r="2" fill="#fff"/>
                <text x="45" y="137" font-family="Microsoft YaHei" font-size="10" fill="#000">群聊</text>
                
                <!-- 联系人列表 -->
                <rect x="8" y="155" width="204" height="3" fill="#f0f0f0"/>
                <text x="20" y="170" font-family="Microsoft YaHei" font-size="9" fill="#666">A</text>
                
                <!-- 联系人1 - 阿斯 -->
                <rect x="8" y="175" width="204" height="40" fill="#fff"/>
                <circle cx="25" cy="195" r="12" fill="#4A90E2"/>
                <text x="25" y="200" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">阿</text>
                <text x="45" y="200" font-family="Microsoft YaHei" font-size="10" fill="#000">阿斯</text>
                
                <!-- 联系人2 - 啊哈撤大 -->
                <rect x="8" y="215" width="204" height="40" fill="#fff"/>
                <circle cx="25" cy="235" r="12" fill="#28A745"/>
                <text x="25" y="240" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">啊</text>
                <text x="45" y="240" font-family="Microsoft YaHei" font-size="10" fill="#000">啊哈撤大</text>
                
                <!-- 分隔线 -->
                <text x="20" y="270" font-family="Microsoft YaHei" font-size="9" fill="#666">C</text>
                
                <!-- 联系人3 - 财神爷 -->
                <rect x="8" y="275" width="204" height="40" fill="#fff"/>
                <circle cx="25" cy="295" r="12" fill="#FFB74D"/>
                <text x="25" y="300" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">财</text>
                <text x="45" y="300" font-family="Microsoft YaHei" font-size="10" fill="#000">财神爷</text>
                
                <!-- 底部导航 -->
                <rect x="8" y="360" width="204" height="32" fill="#f8f9fa"/>
                <circle cx="50" cy="376" r="8" fill="#ccc"/>
                <text x="50" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">💬</text>
                <text x="50" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">首页</text>
                <circle cx="110" cy="376" r="8" fill="#FF6B6B"/>
                <text x="110" y="380" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">👥</text>
                <text x="110" y="388" font-family="Microsoft YaHei" font-size="6" fill="#FF6B6B" text-anchor="middle">通讯录</text>
                <circle cx="170" cy="376" r="8" fill="#ccc"/>
                <text x="170" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">👤</text>
                <text x="170" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">我的</text>
              </g>
              
              <!-- 第二个手机 - 联系人详情 -->
              <g transform="translate(400, 150)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen2)"/>
                
                <!-- 头部导航 -->
                <rect x="8" y="8" width="204" height="45" fill="#FF6B6B"/>
                <text x="20" y="35" font-family="Arial" font-size="12" fill="#fff">‹</text>
                <text x="110" y="35" font-family="Microsoft YaHei" font-size="12" font-weight="bold" fill="#fff" text-anchor="middle">阿斯</text>
                <text x="190" y="35" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">⋯</text>
                
                <!-- 个人信息区域 -->
                <rect x="8" y="53" width="204" height="120" fill="#fff"/>
                
                <!-- 头像 -->
                <circle cx="110" cy="90" r="30" fill="#4A90E2"/>
                <text x="110" y="100" font-family="Arial" font-size="20" fill="#fff" text-anchor="middle">阿</text>
                
                <!-- 姓名 -->
                <text x="110" y="130" font-family="Microsoft YaHei" font-size="14" font-weight="bold" fill="#000" text-anchor="middle">阿斯</text>
                
                <!-- 状态 -->
                <text x="110" y="150" font-family="Microsoft YaHei" font-size="10" fill="#666" text-anchor="middle">在线</text>
                
                <!-- 操作按钮 -->
                <rect x="8" y="180" width="204" height="60" fill="#f8f9fa"/>
                <rect x="30" y="200" width="40" height="30" rx="5" fill="#4CAF50"/>
                <text x="50" y="218" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">💬</text>
                <text x="50" y="228" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">消息</text>
                
                <rect x="80" y="200" width="40" height="30" rx="5" fill="#2196F3"/>
                <text x="100" y="218" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">📞</text>
                <text x="100" y="228" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">语音</text>
                
                <rect x="130" y="200" width="40" height="30" rx="5" fill="#FF9800"/>
                <text x="150" y="218" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">📹</text>
                <text x="150" y="228" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">视频</text>
                
                <!-- 详细信息 -->
                <rect x="8" y="250" width="204" height="80" fill="#fff"/>
                <text x="20" y="270" font-family="Microsoft YaHei" font-size="10" fill="#333">个人信息</text>
                <text x="20" y="290" font-family="Microsoft YaHei" font-size="9" fill="#666">昵称: 阿斯</text>
                <text x="20" y="310" font-family="Microsoft YaHei" font-size="9" fill="#666">地区: 北京</text>
                
                <!-- 底部输入区 -->
                <rect x="8" y="340" width="204" height="50" fill="#fff"/>
                <rect x="20" y="355" width="120" height="20" rx="10" fill="#f5f5f5"/>
                <text x="80" y="367" font-family="Microsoft YaHei" font-size="8" fill="#999" text-anchor="middle">发送消息...</text>
                <circle cx="150" cy="365" r="10" fill="#4CAF50"/>
                <text x="150" y="369" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">→</text>
                <circle cx="180" cy="365" r="12" fill="#f0f0f0"/>
                <text x="180" y="369" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">+</text>
              </g>
            </svg>
          </div>
          <div class="info">
            <div class="p1">专业通讯录管理</div>
            <div class="p2">轻松管理联系人，一键快速沟通</div>
          </div>
        </div>
      </div>
      <div class="section section1 section1_3">
        <div class="homeBannerBox">
          <div class="img">
            <svg width="900" height="739" viewBox="0 0 900 739" xmlns="http://www.w3.org/2000/svg">
              <!-- 呗呗优选群聊页面设计 - 一比一复刻参考风格 -->
              <defs>
                <!-- 圆环装饰渐变 -->
                <linearGradient id="ringGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.6" />
                  <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0.2" />
                </linearGradient>
                
                <!-- 手机屏幕渐变 -->
                <linearGradient id="phoneScreen3" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
                </linearGradient>
              </defs>
              
              <!-- 网格纹理 -->
              <defs>
                <pattern id="gridPattern3" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#333" stroke-width="0.5" opacity="0.1"/>
                </pattern>
              </defs>
              <rect width="900" height="739" fill="url(#gridPattern3)" opacity="0.3"/>
              
              <!-- 圆形装饰线条 -->
              <circle cx="450" cy="369" r="280" fill="none" stroke="url(#ringGradient3)" stroke-width="1" opacity="0.4"/>
              <circle cx="450" cy="369" r="320" fill="none" stroke="url(#ringGradient3)" stroke-width="1" opacity="0.3"/>
              <circle cx="450" cy="369" r="360" fill="none" stroke="url(#ringGradient3)" stroke-width="1" opacity="0.2"/>
              
              <!-- 浮动装饰元素 -->
              <!-- 心形图标 -->
              <g transform="translate(120, 180)">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF6B6B" opacity="0.8"/>
              </g>
              
              <!-- 视频图标 -->
              <g transform="translate(720, 400)">
                <rect x="0" y="6" width="20" height="12" rx="2" fill="#9C27B0" opacity="0.8"/>
                <path d="M20 8.5L24 6v12l-4-2.5V8.5z" fill="#9C27B0" opacity="0.8"/>
              </g>
              
              <!-- 装饰圆点 -->
              <circle cx="180" cy="120" r="4" fill="#00d4aa" opacity="0.6"/>
              <circle cx="750" cy="250" r="3" fill="#00d4aa" opacity="0.5"/>
              <circle cx="820" cy="580" r="5" fill="#00d4aa" opacity="0.4"/>
              <circle cx="100" cy="500" r="3" fill="#00d4aa" opacity="0.7"/>
              
              <!-- 第一个手机 - 群聊列表 -->
              <g transform="translate(150, 80)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen3)"/>
                
                <!-- 状态栏 -->
                <rect x="8" y="8" width="204" height="25" fill="#fff"/>
                <text x="20" y="25" font-family="Arial" font-size="10" fill="#000">9:41</text>
                <text x="180" y="25" font-family="Arial" font-size="10" fill="#000">100%</text>
                
                <!-- 头部导航 -->
                <rect x="8" y="33" width="204" height="40" fill="#fff"/>
                <text x="20" y="55" font-family="Microsoft YaHei" font-size="14" font-weight="bold" fill="#000">群聊</text>
                <circle cx="170" cy="53" r="8" fill="#f0f0f0"/>
                <text x="167" y="57" font-family="Arial" font-size="8" fill="#666">🔍</text>
                <circle cx="190" cy="53" r="8" fill="#f0f0f0"/>
                <text x="187" y="57" font-family="Arial" font-size="8" fill="#666">+</text>
                
                <!-- 群聊列表 -->
                
                <!-- 群聊1 - 呗呗优选官方群 -->
                <rect x="8" y="80" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="102" r="12" fill="#FF6B6B"/>
                <circle cx="27" cy="99" r="3" fill="#fff"/>
                <circle cx="33" cy="99" r="3" fill="#fff"/>
                <circle cx="30" cy="105" r="3" fill="#fff"/>
                <text x="50" y="98" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">呗呗优选官方群</text>
                <text x="50" y="112" font-family="Microsoft YaHei" font-size="8" fill="#666">阿斯: 大家好！欢迎来到呗呗优选</text>
                <text x="185" y="95" font-family="Arial" font-size="7" fill="#999" text-anchor="end">刚刚</text>
                <circle cx="190" cy="110" r="6" fill="#FF6B6B"/>
                <text x="190" y="114" font-family="Arial" font-size="5" fill="#fff" text-anchor="middle">99+</text>
                
                <!-- 群聊2 - 语音群聊 -->
                <rect x="8" y="125" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="147" r="12" fill="#17A2B8"/>
                <circle cx="27" cy="144" r="3" fill="#fff"/>
                <circle cx="33" cy="144" r="3" fill="#fff"/>
                <circle cx="30" cy="150" r="3" fill="#fff"/>
                <text x="50" y="143" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">语音群聊</text>
                <text x="50" y="157" font-family="Microsoft YaHei" font-size="8" fill="#666">啊哈撤大: [语音] 20"</text>
                <text x="185" y="140" font-family="Arial" font-size="7" fill="#999" text-anchor="end">10:30</text>
                <circle cx="190" cy="155" r="6" fill="#FF6B6B"/>
                <text x="190" y="159" font-family="Arial" font-size="5" fill="#fff" text-anchor="middle">3</text>
                
                <!-- 群聊3 - 游戏交流群 -->
                <rect x="8" y="170" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="192" r="12" fill="#28A745"/>
                <circle cx="27" cy="189" r="3" fill="#fff"/>
                <circle cx="33" cy="189" r="3" fill="#fff"/>
                <circle cx="30" cy="195" r="3" fill="#fff"/>
                <text x="50" y="188" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">游戏交流群</text>
                <text x="50" y="202" font-family="Microsoft YaHei" font-size="8" fill="#666">财神爷: 今天一起开黑吗？</text>
                <text x="185" y="185" font-family="Arial" font-size="7" fill="#999" text-anchor="end">昨天</text>
                
                <!-- 群聊4 - 技术讨论群 -->
                <rect x="8" y="215" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="237" r="12" fill="#9C27B0"/>
                <circle cx="27" cy="234" r="3" fill="#fff"/>
                <circle cx="33" cy="234" r="3" fill="#fff"/>
                <circle cx="30" cy="240" r="3" fill="#fff"/>
                <text x="50" y="233" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">技术讨论群</text>
                <text x="50" y="247" font-family="Microsoft YaHei" font-size="8" fill="#666">[图片] 这个功能怎么实现？</text>
                <text x="185" y="230" font-family="Arial" font-size="7" fill="#999" text-anchor="end">2天前</text>
                
                <!-- 底部导航 -->
                <rect x="8" y="360" width="204" height="32" fill="#f8f9fa"/>
                <circle cx="50" cy="376" r="8" fill="#ccc"/>
                <text x="50" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">💬</text>
                <text x="50" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">首页</text>
                <circle cx="110" cy="376" r="8" fill="#ccc"/>
                <text x="110" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">👥</text>
                <text x="110" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">通讯录</text>
                <circle cx="170" cy="376" r="8" fill="#FF6B6B"/>
                <text x="170" y="380" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">💬</text>
                <text x="170" y="388" font-family="Microsoft YaHei" font-size="6" fill="#FF6B6B" text-anchor="middle">群聊</text>
              </g>
              
              <!-- 第二个手机 - 群聊对话 -->
              <g transform="translate(400, 150)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen3)"/>
                
                <!-- 头部导航 -->
                <rect x="8" y="8" width="204" height="45" fill="#FF6B6B"/>
                <text x="20" y="35" font-family="Arial" font-size="12" fill="#fff">‹</text>
                <text x="110" y="35" font-family="Microsoft YaHei" font-size="12" font-weight="bold" fill="#fff" text-anchor="middle">呗呗优选官方群 (5)</text>
                <text x="190" y="35" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">⋯</text>
                
                <!-- 群聊内容区域 -->
                <rect x="8" y="53" width="204" height="280" fill="#E5E5EA"/>
                
                <!-- 日期分隔 -->
                <rect x="80" y="70" width="60" height="15" rx="7" fill="#fff" opacity="0.8"/>
                <text x="110" y="80" font-family="Arial" font-size="7" fill="#666" text-anchor="middle">2025/01/14</text>
                
                <!-- 群消息1 - 阿斯 -->
                <circle cx="25" cy="105" r="10" fill="#4A90E2"/>
                <text x="25" y="110" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">阿</text>
                <text x="40" y="97" font-family="Microsoft YaHei" font-size="7" fill="#666">阿斯</text>
                <rect x="40" y="105" width="100" height="20" rx="10" fill="#fff"/>
                <text x="90" y="117" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">大家好！欢迎来到呗呗优选</text>
                
                <!-- 群消息2 - 啊哈撤大 -->
                <circle cx="25" cy="140" r="10" fill="#28A745"/>
                <text x="25" y="145" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">啊</text>
                <text x="40" y="132" font-family="Microsoft YaHei" font-size="7" fill="#666">啊哈撤大</text>
                <rect x="40" y="140" width="80" height="20" rx="10" fill="#fff"/>
                <text x="80" y="152" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">好的，多多指教</text>
                
                <!-- 群消息3 - 财神爷 -->
                <circle cx="25" cy="175" r="10" fill="#FFB74D"/>
                <text x="25" y="180" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">财</text>
                <text x="40" y="167" font-family="Microsoft YaHei" font-size="7" fill="#666">财神爷</text>
                <rect x="40" y="175" width="90" height="20" rx="10" fill="#fff"/>
                <text x="85" y="187" font-family="Microsoft YaHei" font-size="8" fill="#333" text-anchor="middle">这个软件真不错！</text>
                
                <!-- 自己的消息 -->
                <rect x="100" y="210" width="80" height="30" rx="15" fill="#4CAF50"/>
                <text x="140" y="223" font-family="Microsoft YaHei" font-size="8" fill="#fff" text-anchor="middle">我也觉得很棒</text>
                <text x="140" y="233" font-family="Microsoft YaHei" font-size="8" fill="#fff" text-anchor="middle">一起交流吧！</text>
                
                <!-- 语音消息 -->
                <circle cx="25" cy="265" r="10" fill="#17A2B8"/>
                <text x="25" y="270" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">语</text>
                <text x="40" y="257" font-family="Microsoft YaHei" font-size="7" fill="#666">语音群聊</text>
                <rect x="40" y="265" width="70" height="20" rx="10" fill="#fff"/>
                <text x="55" y="277" font-family="Arial" font-size="8" fill="#333">🎤 20"</text>
                
                <!-- 底部输入区 -->
                <rect x="8" y="340" width="204" height="50" fill="#fff"/>
                <circle cx="30" cy="365" r="12" fill="#f0f0f0"/>
                <text x="30" y="369" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">😊</text>
                <rect x="50" y="355" width="100" height="20" rx="10" fill="#f5f5f5"/>
                <text x="100" y="367" font-family="Microsoft YaHei" font-size="8" fill="#999" text-anchor="middle">群聊消息...</text>
                <circle cx="160" cy="365" r="10" fill="#2196F3"/>
                <text x="160" y="369" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">🎤</text>
                <circle cx="180" cy="365" r="12" fill="#f0f0f0"/>
                <text x="180" y="369" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">+</text>
              </g>
            </svg>
          </div>
          <div class="info">
            <div class="p1">多人群聊</div>
            <div class="p2">创建话题群聊，与志同道合的朋友畅聊</div>
          </div>
        </div>
      </div>
      <div class="section section1 section1_4">
        <div class="homeBannerBox">
          <div class="img">
            <svg width="900" height="739" viewBox="0 0 900 739" xmlns="http://www.w3.org/2000/svg">
              <!-- 呗呗优选语音通话页面设计 - 一比一复刻参考风格 -->
              <defs>
                <!-- 圆环装饰渐变 -->
                <linearGradient id="ringGradient4" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:0.6" />
                  <stop offset="100%" style="stop-color:#00d4aa;stop-opacity:0.2" />
                </linearGradient>
                
                <!-- 手机屏幕渐变 -->
                <linearGradient id="phoneScreen4" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
                </linearGradient>
                
                <!-- 通话背景渐变 -->
                <radialGradient id="callBg4" cx="50%" cy="50%" r="70%">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </radialGradient>
              </defs>
              
              <!-- 网格纹理 -->
              <defs>
                <pattern id="gridPattern4" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#333" stroke-width="0.5" opacity="0.1"/>
                </pattern>
              </defs>
              <rect width="900" height="739" fill="url(#gridPattern4)" opacity="0.3"/>
              
              <!-- 圆形装饰线条 -->
              <circle cx="450" cy="369" r="280" fill="none" stroke="url(#ringGradient4)" stroke-width="1" opacity="0.4"/>
              <circle cx="450" cy="369" r="320" fill="none" stroke="url(#ringGradient4)" stroke-width="1" opacity="0.3"/>
              <circle cx="450" cy="369" r="360" fill="none" stroke="url(#ringGradient4)" stroke-width="1" opacity="0.2"/>
              
              <!-- 浮动装饰元素 -->
              <!-- 心形图标 -->
              <g transform="translate(120, 180)">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#FF6B6B" opacity="0.8"/>
              </g>
              
              <!-- 视频图标 -->
              <g transform="translate(720, 400)">
                <rect x="0" y="6" width="20" height="12" rx="2" fill="#9C27B0" opacity="0.8"/>
                <path d="M20 8.5L24 6v12l-4-2.5V8.5z" fill="#9C27B0" opacity="0.8"/>
              </g>
              
              <!-- 装饰圆点 -->
              <circle cx="180" cy="120" r="4" fill="#00d4aa" opacity="0.6"/>
              <circle cx="750" cy="250" r="3" fill="#00d4aa" opacity="0.5"/>
              <circle cx="820" cy="580" r="5" fill="#00d4aa" opacity="0.4"/>
              <circle cx="100" cy="500" r="3" fill="#00d4aa" opacity="0.7"/>
              
              <!-- 第一个手机 - 通话列表 -->
              <g transform="translate(150, 80)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#phoneScreen4)"/>
                
                <!-- 状态栏 -->
                <rect x="8" y="8" width="204" height="25" fill="#fff"/>
                <text x="20" y="25" font-family="Arial" font-size="10" fill="#000">9:41</text>
                <text x="180" y="25" font-family="Arial" font-size="10" fill="#000">100%</text>
                
                <!-- 头部导航 -->
                <rect x="8" y="33" width="204" height="40" fill="#fff"/>
                <text x="20" y="55" font-family="Microsoft YaHei" font-size="14" font-weight="bold" fill="#000">通话记录</text>
                <circle cx="170" cy="53" r="8" fill="#f0f0f0"/>
                <text x="167" y="57" font-family="Arial" font-size="8" fill="#666">🔍</text>
                <circle cx="190" cy="53" r="8" fill="#f0f0f0"/>
                <text x="187" y="57" font-family="Arial" font-size="8" fill="#666">+</text>
                
                <!-- 通话记录列表 -->
                
                <!-- 通话记录1 - 阿斯 -->
                <rect x="8" y="80" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="102" r="12" fill="#4A90E2"/>
                <text x="30" y="107" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">阿</text>
                <text x="50" y="98" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">阿斯</text>
                <text x="50" y="112" font-family="Microsoft YaHei" font-size="8" fill="#666">语音通话 · 3分钟</text>
                <circle cx="20" cy="95" r="3" fill="#4CAF50"/>
                <text x="185" y="95" font-family="Arial" font-size="7" fill="#999" text-anchor="end">刚刚</text>
                <circle cx="185" cy="110" r="8" fill="#f0f0f0"/>
                <text x="185" y="114" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">📞</text>
                
                <!-- 通话记录2 - 群聊 -->
                <rect x="8" y="125" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="147" r="12" fill="#17A2B8"/>
                <circle cx="27" cy="144" r="3" fill="#fff"/>
                <circle cx="33" cy="144" r="3" fill="#fff"/>
                <circle cx="30" cy="150" r="3" fill="#fff"/>
                <text x="50" y="143" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">呗呗优选官方群</text>
                <text x="50" y="157" font-family="Microsoft YaHei" font-size="8" fill="#666">群语音通话 · 15分钟</text>
                <circle cx="20" cy="140" r="3" fill="#4CAF50"/>
                <text x="185" y="140" font-family="Arial" font-size="7" fill="#999" text-anchor="end">10:30</text>
                <circle cx="185" cy="155" r="8" fill="#f0f0f0"/>
                <text x="185" y="159" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">📞</text>
                
                <!-- 通话记录3 - 啊哈撤大 -->
                <rect x="8" y="170" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="192" r="12" fill="#28A745"/>
                <text x="30" y="197" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">啊</text>
                <text x="50" y="188" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">啊哈撤大</text>
                <text x="50" y="202" font-family="Microsoft YaHei" font-size="8" fill="#666">语音通话 · 8分钟</text>
                <circle cx="20" cy="185" r="3" fill="#FF6B6B"/>
                <text x="185" y="185" font-family="Arial" font-size="7" fill="#999" text-anchor="end">昨天</text>
                <circle cx="185" cy="200" r="8" fill="#f0f0f0"/>
                <text x="185" y="204" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">📞</text>
                
                <!-- 通话记录4 - 财神爷 -->
                <rect x="8" y="215" width="204" height="45" fill="#fff"/>
                <circle cx="30" cy="237" r="12" fill="#FFB74D"/>
                <text x="30" y="242" font-family="Arial" font-size="8" fill="#fff" text-anchor="middle">财</text>
                <text x="50" y="233" font-family="Microsoft YaHei" font-size="10" font-weight="bold" fill="#000">财神爷</text>
                <text x="50" y="247" font-family="Microsoft YaHei" font-size="8" fill="#666">语音通话 · 未接听</text>
                <circle cx="20" cy="230" r="3" fill="#FF6B6B"/>
                <text x="185" y="230" font-family="Arial" font-size="7" fill="#999" text-anchor="end">2天前</text>
                <circle cx="185" cy="245" r="8" fill="#f0f0f0"/>
                <text x="185" y="249" font-family="Arial" font-size="8" fill="#666" text-anchor="middle">📞</text>
                
                <!-- 底部导航 -->
                <rect x="8" y="360" width="204" height="32" fill="#f8f9fa"/>
                <circle cx="50" cy="376" r="8" fill="#ccc"/>
                <text x="50" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">💬</text>
                <text x="50" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">首页</text>
                <circle cx="110" cy="376" r="8" fill="#ccc"/>
                <text x="110" y="380" font-family="Arial" font-size="6" fill="#666" text-anchor="middle">👥</text>
                <text x="110" y="388" font-family="Microsoft YaHei" font-size="6" fill="#666" text-anchor="middle">通讯录</text>
                <circle cx="170" cy="376" r="8" fill="#FF6B6B"/>
                <text x="170" y="380" font-family="Arial" font-size="6" fill="#fff" text-anchor="middle">📞</text>
                <text x="170" y="388" font-family="Microsoft YaHei" font-size="6" fill="#FF6B6B" text-anchor="middle">通话</text>
              </g>
              
              <!-- 第二个手机 - 语音通话中 -->
              <g transform="translate(400, 150)">
                <!-- 手机外框 -->
                <rect x="0" y="0" width="220" height="400" rx="25" fill="#000" opacity="0.8"/>
                <rect x="8" y="8" width="204" height="384" rx="20" fill="url(#callBg4)"/>
                
                <!-- 状态栏 -->
                <rect x="8" y="8" width="204" height="25" fill="transparent"/>
                <text x="20" y="25" font-family="Arial" font-size="10" fill="#fff">9:41</text>
                <text x="180" y="25" font-family="Arial" font-size="10" fill="#fff">100%</text>
                
                <!-- 通话状态 -->
                <text x="110" y="60" font-family="Microsoft YaHei" font-size="10" fill="#fff" text-anchor="middle" opacity="0.8">语音通话中</text>
                
                <!-- 对方头像 -->
                <circle cx="110" cy="130" r="40" fill="#4A90E2"/>
                <text x="110" y="145" font-family="Arial" font-size="30" fill="#fff" text-anchor="middle">阿</text>
                
                <!-- 对方姓名 -->
                <text x="110" y="190" font-family="Microsoft YaHei" font-size="18" font-weight="bold" fill="#fff" text-anchor="middle">阿斯</text>
                
                <!-- 通话时长 -->
                <text x="110" y="210" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle" opacity="0.8">03:25</text>
                
                <!-- 音频波形指示器 -->
                <g transform="translate(80, 240)">
                  <rect x="0" y="15" width="3" height="10" fill="#fff" opacity="0.6"/>
                  <rect x="5" y="10" width="3" height="20" fill="#fff" opacity="0.7"/>
                  <rect x="10" y="5" width="3" height="30" fill="#fff" opacity="0.8"/>
                  <rect x="15" y="12" width="3" height="16" fill="#fff" opacity="0.6"/>
                  <rect x="20" y="8" width="3" height="24" fill="#fff" opacity="0.7"/>
                  <rect x="25" y="3" width="3" height="34" fill="#fff" opacity="0.9"/>
                  <rect x="30" y="7" width="3" height="26" fill="#fff" opacity="0.8"/>
                  <rect x="35" y="10" width="3" height="20" fill="#fff" opacity="0.7"/>
                  <rect x="40" y="13" width="3" height="14" fill="#fff" opacity="0.6"/>
                  <rect x="45" y="15" width="3" height="10" fill="#fff" opacity="0.5"/>
                </g>
                
                <!-- 通话控制按钮 -->
                <g transform="translate(35, 300)">
                  <!-- 静音按钮 -->
                  <circle cx="30" cy="30" r="20" fill="#fff" opacity="0.2"/>
                  <text x="30" y="37" font-family="Arial" font-size="16" fill="#fff" text-anchor="middle">🔇</text>
                  
                  <!-- 扬声器按钮 -->
                  <circle cx="80" cy="30" r="20" fill="#fff" opacity="0.2"/>
                  <text x="80" y="37" font-family="Arial" font-size="16" fill="#fff" text-anchor="middle">🔊</text>
                  
                  <!-- 挂断按钮 -->
                  <circle cx="130" cy="30" r="20" fill="#FF5252"/>
                  <text x="130" y="37" font-family="Arial" font-size="16" fill="#fff" text-anchor="middle">📞</text>
                </g>
                
                <!-- 底部功能按钮 -->
                <g transform="translate(50, 360)">
                  <!-- 添加通话 -->
                  <circle cx="25" cy="20" r="15" fill="#fff" opacity="0.2"/>
                  <text x="25" y="26" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">+</text>
                  
                  <!-- 键盘 -->
                  <circle cx="75" cy="20" r="15" fill="#fff" opacity="0.2"/>
                  <text x="75" y="26" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">#</text>
                  
                  <!-- 联系人 -->
                  <circle cx="125" cy="20" r="15" fill="#fff" opacity="0.2"/>
                  <text x="125" y="26" font-family="Arial" font-size="12" fill="#fff" text-anchor="middle">👤</text>
                </g>
              </g>
            </svg>
          </div>
          <div class="info">
            <div class="p1">高品质语音通话</div>
            <div class="p2">清晰流畅的语音体验，让距离不再是问题</div>
          </div>
        </div>
      </div>
      <div class="section section2">
        <div class="about about1">
          <div class="cnt">
            <div class="title">关于呗呗优选</div>
            <div class="info">
              <p>呗呗优选是一款专注于真实有趣社交的聊天交友应用，致力于为用户提供安全、便捷、有趣的社交体验。</p>
              <p>我们相信，真实的社交才是最有价值的。通过呗呗优选，用户可以轻松结识志同道合的朋友，享受纯粹的社交乐趣，让每一次交流都充满意义。</p>
            </div>
            <div class="info2">
              <b class="font1">使命和愿景：</b>
              连接真实的人，创造有趣的社交体验。让每个人都能在呗呗优选中找到属于自己的社交圈，享受真诚友谊带来的快乐。
            </div>
          </div>
        </div>
      </div>



      <div class="section section3 fp-auto-height">
        <div class="contactBanner">
          <div class="container">
            <div class="title">联系我们</div>
            <div class="contact-grid">
              <!--<div class="contact-card">-->
              <!--  <div class="icon">🏢</div>-->
              <!--  <h3>公司地址</h3>-->
              <!--  <p>浙江省温州瑞安市宏都小区10号楼1002室</p>-->
              <!--</div>-->
              <div class="contact-card">
                <div class="icon">📧</div>
                <h3>邮箱地址</h3>
                <p>2573529943@qq.com</p>
              </div>
              <!--<div class="contact-card">-->
              <!--  <div class="icon">🤝</div>-->
              <!--  <h3>商务合作邮箱</h3>-->
              <!--  <p>bd@xiaolongxia.com</p>-->
              <!--</div>-->
              <div class="contact-card">
                <div class="icon">📱</div>
                <h3>呗呗优选APP</h3>
                <p>在呗呗优选内选择 "我" - "设置" - "帮助与反馈" - "意见反馈"，提交您的意见</p>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <p class="p1">
            <a href="#">用户协议及隐私政策</a>
          </p>
          <div class="p2">
            <span>Copyright © 2024-2025 沈阳市旌云网络科技有限公司 版权所有</span>
            <!--<span>地址：浙江省温州瑞安市宏都小区10号楼1002室</span>-->
            <br />
            <span style="margin-right:20px;">ICP备案序号：<a href="https://beian.miit.gov.cn/">辽ICP备2024041881号-1</a></span>
            <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33038102332550">
                <img src="img/logo01.6189a29f.png" style="width:14px; height:14px; margin-top:20px;"> 浙公网安备：33038102332550号
            </a></span>
          </div>
          <div class="p3">
            <a href="#">违法和不良信息举报中心</a>
            <a href="#">全国12315举报平台</a>
          </div>
        </div>
      </div>
    </div>
    <div class="g_pointDiv">
      <a href="#Home" class="active"></a>
      <a href="#Home2"></a>
      <a href="#Home3"></a>
      <a href="#Home4"></a>
      <a href="#About"></a>
      <a href="#Contact"></a>
    </div>
    <div class="homeDownDiv" id="homeDownDiv">
      <!-- 智能下载按钮 (移动端使用) -->
      <a id="smartDownloadBtn" class="btn btnSmart">
        <div class="smart-icon" id="smartIcon">📱</div>
        <div class="smart-text">
          <span class="smart-title" id="smartTitle">立即下载</span>
          <span class="smart-subtitle" id="smartSubtitle">检测设备中...</span>
        </div>
      </a>
      
      <!-- 传统按钮 (桌面端使用) -->
      <a href="https://apps.apple.com/us/app/%E5%A5%BD%E6%BB%A1%E8%B4%AD/id6742049757" class="btn btnIos"></a>
      <a href="https://www.jingyunwangluo.com/apk/beibeiyouxuan.apk" class="btn btnAndroid"></a>
      <a href="https://www.jingyunwangluo.com/apk/Setup 2.0.0.exe" class="btn btnWindows">
        <div class="text">
          <span class="title">Windows版</span>
          <span class="subtitle">电脑客户端</span>
        </div>
      </a>
    </div>
  </div>
</body>
  <script>
    const link = document.getElementById('downloadLink');
    
    // 检测iOS设备并提示
    const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    if (isiOS) {
      link.href = "https://apps.apple.com/us/app/%E5%A5%BD%E6%BB%A1%E8%B4%AD/id6742049757";
      link.onclick = (e) => {
        e.preventDefault();
        alert("iOS设备无法安装APK，请使用Android设备访问");
      };
    } else {
      // Android设备：强制添加download属性
      link.setAttribute('download', '');
      link.href = "https://www.jingyunwangluo.com/apk/beibeiyouxuan.apk";
      // 可选：解决部分浏览器拦截（如微信内置浏览器）
      link.addEventListener('click', (e) => {
        if (navigator.userAgent.includes('WeChat')) {
          e.preventDefault();
          alert("请点击右上角用浏览器打开下载");
        }
      });
    }
  </script>
</html> 